﻿<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset=utf-8>
  <meta name=description content="">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <style type="text/css">
  div {
    margin-top: 15px;
  }
  
  ul {
    list-style: none;
    width: 150px;
    border: 1px solid;
    height: 450px;
    overflow: auto;
    margin: 0;
    padding: 0;
  }
  
  li:hover {
    background: #cccccc;
  }
  
  li.active {
    background: #F8F7AF;
  }
  
  input {
    width: 150px;
  }
  
  .area div {
    display: inline-block;
  }
  
  .area div:last {
    clear: both;
  }

  </style>
  <script src="jquery.min.js"></script>
  <script src="area.js"></script>
  <script>
  $(function() {
    //简单实现,绑定Select控件组，实现级联下拉选择
    //先定义一个对象，用于保存选中的省、市、区{currProcinve、currCity、currCounty}
    //如果不需要获取选中的省、市、区或者自己另外实现，可不传该对象
    var AreaSlt1 = {};

    Area.BindSelect({
      province: $('#pro1'),
      city: $('#city1'),
      county: $('#county1')
    }, AreaSlt1);
      /*$('#pro1')、$('#city1')、$('#county1')的下拉列表将自动填充，change事件将自动绑定，AreaSlt1对象将会得到选中的省市区对象
  AreaSlt1：{
  currProvince:{name:’广东省’,code:’440000’},
  currCity:{name:’广州市’,code:’440100’},
  currCounty:{name:’荔湾区’,code:’440103’}
  }*/

    $('#pro1,#city1,#county1').on('change', '', function() {
      $('#showCurr1').html(AreaSlt1.currProvince.name + "-" + AreaSlt1.currCity.name + "-" + AreaSlt1.currCounty.name);
    });

  });
  </script>
  <script src="pinyin_dict_withtone.js"></script>
  <script src="pinyinUtil.js"></script>  
  <script>
  $(function() {
    //复杂实现,支持关键字筛选
    //若要支持拼音筛选(全拼或简拼)，需引入pinyin_dict_withtone.js、pinyinUtil.js
    Area.Init();

    var area = {};
    area.currProvince = {};
    area.currCity = {};
    area.currCounty = {};

    setTimeout(function() {
        setPro2();
        console.log(Area.area);
    }, 300);

    $('#pro2').on('click', 'li', function() {
      $('#city2s').val('');
      area.currProvince = area.province[$(this).attr('id')];
      setCity2();
    });

    $('#city2').on('click', 'li', function() {
      $('#county2s').val('');
      area.currCity = area.city[$(this).attr('id')];
      setCounty2();
    });

    $('#county2').on('click', 'li', function() {
      area.currCounty = area.county[$(this).attr('id')];
    });    

    $('#pro2,#city2,#county2').on('click', 'li', function() {
      $(this).addClass('active').siblings().removeClass('active');
      //console.log(area.currCounty);
      $('#showCurr2').html(area.currProvince.name + "-" + area.currCity.name + "-" + area.currCounty.name);
    });

    $('#pro2s').on('input', '', function() {
      $('#city2s').val('');
      setPro2($(this).val());
    });

    $('#city2s').on('input', '', function() {
      $('#county2s').val('');
      setCity2($(this).val());
    });

    $('#county2s').on('input', '', function() {
      setCounty2($(this).val());
    });

    function setPro2(param) {
      area.province = Area.GetProvince(param);
      $('#pro2').html('');
      $.each(area.province, function(index, val) {
        $('#pro2').append('<li id="' + index + '">' + val.name + '</li>');
      });
      $('#pro2 li:first').click();
    };

    function setCity2(param) {
      area.city = Area.GetCity(area.currProvince, param);
      $('#city2').html('');
      $.each(area.city, function(index, val) {
        $('#city2').append('<li id="' + index + '">' + val.name + '</li>');
      });
      $('#city2 li:first').click();
    };

    function setCounty2(param) {
      area.county = Area.GetCounty(area.currCity, param);
      $('#county2').html('');
      $.each(area.county, function(index, val) {
        $('#county2').append('<li id="' + index + '">' + val.name + '</li>');
      });
      $('#county2 li:first').click();
    };

  });
  </script>
</head>

<body>
  <div>
    <select id="pro1"></select>
    <select id="city1"></select>
    <select id="county1"></select>
    <span id="showCurr1">
    </span>
  </div>
  <div class="area">
    <div>
      <input type="text" id="pro2s" placeholder="搜索省份">
      <ul id="pro2">
      </ul>
    </div>
    <div>
      <input type="text" id="city2s" placeholder="搜索城市">
      <ul id="city2">
      </ul>
    </div>
    <div>
      <input type="text" id="county2s" placeholder="搜索区/县">
      <ul id="county2">
      </ul>
    </div>
    <div id="showCurr2"></div>
  </div>
</body>

</html>
